<template>
    <div class="ele-body">
        <el-card shadow="never">
            <el-form
            :model="where"
            label-width="90px"
            class="ele-form-search"
            @keyup.enter.native="reload"
            @submit.native.prevent>
                <el-row :gutter="15">
                    <el-col :lg="12" :md="12">
                        <el-form-item label="推广员:">
                            <PageSelect
                            :placeholder="'请选择推广员'"
                            v-model="where.promote_id"
                            :whereName="'realname'"
                            :url="'/userpromote/index'"
                            :optionLable="'realname'"
                            :optionvalue="'id'"
                            :multiple="false"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="游戏包:">
                            <PageSelect
                            :placeholder="'请选择游戏包'"
                            v-model="where.package_id"
                            :whereName="'package_name'"
                            :url="'/Package/getChannelPackage'"
                            :optionLable="'package_name'"
                            :optionvalue="'id'"
                            :multiple="false"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :lg="6" :md="12">
                        <div class="ele-form-actions">
                            <el-button
                                type="primary"
                                icon="el-icon-search"
                                class="ele-btn-icon"
                                @click="reload"
                                >查询
                            </el-button>
                            <el-button @click="reset">重置</el-button>
                        </div>
                    </el-col>
                    <el-col :lg="2" :md="4">
                        <el-upload
                            accept=".xls,.xlsx"
                            class="upload-demo"
                            :action="uploadImgUrl"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-success="successUpload"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="1"
                            :headers="myHeaders"
                            :on-exceed="handleExceed"
                            :file-list="fileList"
                        >
                            <el-button
                            icon="el-icon-upload2"
                            class="ele-btn-icon"
                            size="small"
                            >
                            导入
                            </el-button>
                        </el-upload>
                    </el-col>
                    <el-col :lg="2" :md="4">
                        <el-button
                            type="primary"
                            icon="el-icon-download"
                            class="ele-btn-icon"
                            size="small"
                            @click="templateImport()"
                        >
                            下载导入模板
                        </el-button>
                    </el-col>
                </el-row>
            </el-form>
            <!-- 数据表格 -->
            <ele-pro-table
            ref="table"
            :where="where"
            :datasource="url"
            :method="'post'"
            :columns="columns"
            height="calc(100vh - 315px)"
            >
                <!-- 表头工具栏 -->
                <template slot="toolbar">
                    <el-button
                        size="small"
                        type="primary"
                        icon="el-icon-plus"
                        class="ele-btn-icon"
                        @click="editTable(null)"
                        >新增
                    </el-button>
                </template>
                <!-- 操作列 -->
                <template slot="action" slot-scope="{ row }">
                    <el-button
                        size="small"
                        type="primary"
                        icon="el-icon-plus"
                        class="ele-btn-icon"
                        @click="editTable(row)"
                        >修改
                    </el-button>
                </template>
            </ele-pro-table>
        </el-card>
        <!-- 编辑弹窗 -->
        <scale-edit
        :data="current"
        :visible.sync="showEdit"
        @done="reload"/>
    </div>
</template>
<script>
import scaleEdit from './scale-edit.vue';
import PageSelect from "@/components/pageSelect/index.vue";
import setting from '@/config/setting'
export default{
    components: {scaleEdit,PageSelect},
    data(){
        let token = setting.takeToken()
        return{
            where:{},
            fileList:[],
            // 表格数据接口,
            url: '/Userpromotepackageproportionconf/index',
            // 当前编辑数据
            current: null,
            // 是否显示编辑弹窗
            showEdit: false,
            uploadImgUrl: process.env.VUE_APP_API_BASE_URL + '/upload/uploadFile',
            myHeaders: { Authorization: token },
            columns:[
            {
                    prop: "promote_id",
                    label: "推广员ID",
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "promote_account",
                    label: "推广员名称",
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "package_id",
                    label: "游戏包ID",
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "package_name",
                    label: "游戏包名称",
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "proportion",
                    label: "分成比例",
                    align: "center",
                    showOverflowTooltip: true,
                },
            ],
        }
    },
    created(){

    },
    mounted(){

    },
    methods:{
        //新增
        addTable(){

        },
        //修改
        editTable(row){
            this.current = row;
            this.showEdit = true;
        },
        /* 重置搜索 */
        reset() {
            this.where = {};
            this.reload();
        },
        reload(){
            this.$refs.table.reload({ where: this.where });
        },
        // 导入
        handlePreview(file) {
            console.log(file)
        },
        handleRemove() {
            this.fileList = []
        },
        successUpload(response) {
            this.$set(this.fileList, this.fileList.length, {
                file_name: response.data.file_name,
                save_name: response.data.save_name,
                file_size: response.data.file_size,
                name: response.data.file_name
            })
            let url = response.data.save_name
            this.$http
                .post('/Userpromotepackageproportionconf/import', { url: url })
                .then((res) => {
                if (res.data.code === 0) {
                    this.$message.success(res.data.msg)
                    this.fileList = []
                    this.reload()
                } else {
                    this.$message.error(res.data.msg)
                    this.fileList = []
                    this.reload()
                }
                })
        },
        beforeRemove(file) {
            return this.$confirm(`确定移除 ${file.name}？`)
        },
        handleExceed() {
            this.$message.warning(`当前限制选择 1 个文件`)
        },
        // 导入模板
        templateImport() {
            window.location.href = `${process.env.VUE_APP_API_BASE_URL}/static/template/proportion.xls`
        },
    }
}
</script>
<style scoped>

</style>